<template>
    <div class="page l-f l-col-stretch l-h100">
        <!-- 左边 -->
        <div class="page_left l-min-w l-f l-column l-col-stretch">
            <div class="page_left_statistics">
                <StatisticsBox :total="3175000" :list="statisticsList" />
            </div>
            <BoxCard title="志愿者人群分布趋势">
                <div>hello</div>
            </BoxCard>
        </div>
        <!-- 中间 -->
        <div class="page_content l-min-w">
            中间
        </div>
        <!-- 右边 -->
        <div class="page_right l-min-w">
            右边
        </div>
    </div>
</template>

<script>
import StatisticsBox from '@/components/statistics-box'
    export default {
        components: {
            StatisticsBox
        },
        data() {
            return {
                statisticsList: [
                    {
                        name: '社区服务站数',
                        color: '#FF553B',
                        number: 10234,
                        unit: '个'
                    },
                    {
                        name: '网格片区数',
                        color: '#64B5FF',
                        number: 10234,
                        unit: '个'
                    },
                    {
                        name: '志愿队伍数',
                        color: '#FFBF50',
                        number: 10234,
                        unit: '个'
                    },
                    {
                        name: '志愿活动数',
                        color: '#FF92EE',
                        number: 10234,
                        unit: '次'
                    },
                    {
                        name: '累计工时',
                        color: '#A9D379',
                        number: 10234,
                        unit: '小时'
                    },
                    {
                        name: '平均工时',
                        color: '#A9D379',
                        number: 152,
                        unit: '小时'
                    }
                ]
            }
        },
        methods: {
            
        }
    }
</script>

<style lang="scss" scoped>
.page {
    padding: 20px;
    box-sizing: border-box;
    &_left {
        flex: 5;
        gap: 5%;
        &_statistics {
            width: 70%;
        }
    }
    &_content {
        flex: 7;
    }
    &_right {
        flex: 3.5;
    }
}
</style>